import styled from 'styled-components';
import { useParams } from 'react-router-dom';
import React, { CSSProperties, FC, useCallback, useEffect, useState } from 'react';

import { TopHeader } from '@/components';
import { ProjectPanel } from './components';
import { PROJECT_CLASS_IDENTIFIER } from '@/services/constants';
import { dsFindOne, ComparsionOperator, Project } from '@/services/local';

export interface ProjectPageProps {
    style?: CSSProperties;
    projectIdentifier: string;
}

export const ProjectPage: FC<ProjectPageProps> = (props) => {
    const params = useParams();

    const [loading, setLoading] = useState<boolean>(false);

    const [activeKey, setActiveKey] = useState<string>('');

    const [version, setVersion] = useState<number>(0);

    const [project, setProject] = useState<Project | null>(null);

    useEffect(() => {
        dsFindOne(0, PROJECT_CLASS_IDENTIFIER, {
            attributes: [
                {
                    name: 'identifier',
                    operator: ComparsionOperator.Equal,
                    value: props.projectIdentifier
                }
            ]
        }).then((proj) => {
            setProject(proj);
        }).catch((err) => {
            console.error(err);
        });

    }, [props.projectIdentifier]);
    return <Container>
        <Header>
            <TopHeader items={[
                {
                    key: project?.identifier,
                    label: project?.title

                }
            ]} activeKey={activeKey} onChange={async (key: string) => {
                setActiveKey(key);
            }}></TopHeader>
        </Header>
        <Content>
            <ProjectPanel projectIdentifier={props.projectIdentifier}></ProjectPanel>
        </Content>
    </Container>
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;
const Header = styled.div`
    min-height: 45px;
    height: 45px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;

const Content = styled.div`
    flex:  1;
    width: 100%;
    overflow: hidden;
`;